@import '../../assets/base.less';
.container-modal{
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, .6);
  position: absolute;
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  .modal-info-container{
    width: 600px;
    background-color: #fff;
    border-radius: 10px;
    .modal-info-top{
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 40px;
      .modal-info-title{
        font-size: 32px;
        font-weight: 800;
        color: #323232;
        text-align: center;
        .modal-info-mintitle{
          font-size: 28px;
          color: #777;
        }
      }
      .modal-info-content{
        padding: 40px 0px;
        word-break: break-all;
        word-wrap: wrap;
        text-align: center;
        font-size: 28px;
        color: #777;
        .op-container{
          position: relative;
          top:0;
          left:0;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-bottom: 40px;
          .shape-line{
            height: 4px;
            background-color: #333;
            position: absolute;
            top: 6rpx;
            padding: 0 10px;
            z-index: 0;
          }
          .activeshap-contianer{
            position: absolute;
            top: 6rpx;
            padding: 0 10px;
            z-index: 0;
            .activeshap-line{
              height: 4px;
              background-color: @bluefontcolor;
              transition: all 1s ease;
            }
          }
          .op-shap-container{
              display: flex;
              position: absolute;
              z-index: 1;
              .time-item{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 90px;
                .shape-circle{
                  width: 16px;
                  height: 16px;
                  border-radius: 16px;
                  background-color: #333;
                  transition: all 1s ease;
                  &.active{
                    background-color:@bluefontcolor;
                  }
                }
                .time-text{
                  font-size: 20px;
                  color:#333;
                  padding: 10px 10px;
                  transition: all 1s ease;
                  &.active {
                    color: @bluefontcolor;
                  }
                }
              }
          }
        }
        .pasdword-container{
          .box-input{
             display: flex;
          align-items: center;
          justify-content: space-between;
          .password-item{
            width: 80px;
            height: 80px;
            border: solid 1px #ccc;
            margin: 10px;
            text-align: center;
            line-height: 80px;
            font-weight: 900;
            color: #323232;
            &.active{
              border-color: @bluefontcolor;
            }
            }
          }
          .password-input{
            width: 0px;
            height: 0px;
            color:transparent;
            text-shadow:0 0 0 red;
          }
        }
      }
    }
    .modal-info-bottom{
      border-top: solid 1px #999;
      .modal-info-button{
      display: flex;
      justify-content: space-between;
      .modal-btn-cancel,.modal-btn-sure{
        border-right: solid 1px #999;
        font-size: 32px;
        text-align: center;
        width: 50%;
        height: 80px;
        line-height: 80px;

      }
      .modal-btn-cancel {
        color: #323232;
      }
      .modal-btn-sure {
        color: @bluefontcolor;
      }
    }
    }
  }
}